
import React, { FC, useState } from 'react'
import  './style.scss';

type TabItemProps = {
  index: number,
  title: string
}

interface TabHouseProps {
  list?: TabItemProps[];
  onClick?: ({index, value}: { index: number, value: string }) => void
}

const TabHouse:FC<TabHouseProps> = (props) => {
  const { list, onClick } = props;
  const [tabIndex, setTabIndex] = useState(0)

  const handleOnClick = (index: number, value: string) => {
    setTabIndex(index);
    onClick && onClick({index, value})
  }

  return <div className="tab-wrapper">
      {
        list?.map((item, index) => {
          return <span
            key={item.index}
            className={tabIndex === index ? 'active' : '' }
            onClick={() => handleOnClick(index, item.title)}
          >
            {item.title}</span>
        })
      }
  </div>
}

TabHouse.defaultProps = {
  list: [
    {
     title: '二手房',
     index: 0
    },
    {
      title: '新房',
      index: 1
    },
    {
      title: '租房',
      index: 2
    }
 ]
}

export default TabHouse;
